<!--
数据
    {
      method:"get",//post|get
      url:"",//
      params:[{name:"",compare:"",value:"",type:""}],//name入参名 compare:比较符号 value:值 type:number,string
      fields:['name','id'],
      limit:10,
    }

-->

<template>
  <div class="mc-api">
    <el-form label-width="50px" size="mini">
      <el-form-item label="地址">
        <el-row>
          <el-col :span="6">
            <el-select v-model="form.method">
              <el-option value="post" label="post"></el-option>
              <el-option value="get" label="get"></el-option>
            </el-select>
          </el-col>
          <el-col :span="18"><el-input v-model="form.url" placeholder="接口地址"/></el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="返回条数">
          <el-input-number v-model="form.limit" placeholder="返回条数"/>
      </el-form-item>
      <el-form-item label="字段" v-if="showFields && fields && fields.length>0">
        <el-checkbox-group v-model="form.fields">
          <el-checkbox v-for="(it,i) in fields" :key="it.name" :label="it.name">{{it.title}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="参数" v-if="!form.params || form.params.length<=0 ">
        <el-button size="mini" @click="addParam(0)">新增</el-button>
      </el-form-item>
      <template v-for="(item,idx) in form.params">
        <el-form-item label="参数">
          <el-row>
            <template v-if="form.method=='post'">
              <el-col :span="6">
                <el-select v-model="item.name" filterable allow-create>
                  <el-option v-for="(it,i) in fields" :key="it.name" :label="it.title" :value="it.name"></el-option>
                </el-select>
              </el-col>
              <el-col :span="6">
                <el-select v-model="item.compare">
                  <el-option v-for="(item,idx) in compares" :key="item.l" :label="item.l" :value="item.k"></el-option>
                </el-select>
              </el-col>
              <el-col :span="6">
                <el-input v-model="item.value" placeholder="参数值"/>
              </el-col>
              <el-col :span="6">
                <el-select v-model="item.type" placeholder="值类型">
                  <el-option value="string" label="字符串"></el-option>
                  <el-option value="number" label="数字"></el-option>
                </el-select>
              </el-col>
              <el-col :span="8">
                <el-button size="mini" @click="addParam(idx)">+</el-button>
                <el-button size="mini" @click="deleteParam(idx)">-</el-button>
              </el-col>
            </template>
            <template v-if="form.method=='get'">
              <el-col :span="8">
                <el-select v-model="item.name" filterable allow-create>
                  <el-option v-for="(it,i) in fields" :key="it.name" :label="it.title" :value="it.name"></el-option>
                </el-select>
              </el-col>
              <el-col :span="8">
                <el-input v-model="item.value" placeholder="参数值"/>
              </el-col>
              <el-col :span="8">
                <el-button size="mini" @click="addParam(idx)">+</el-button>
                <el-button size="mini" @click="deleteParam(idx)">-</el-button>
              </el-col>
            </template>

          </el-row>
        </el-form-item>
      </template>

      <el-form-item v-if="showSaveBtn">
        <el-button size="mini" @click="confirm" type="primary">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'mc-api',
  data () {
    return {
      form:this.data,
      compares:[
        {k:"=",l:"等于"},
        {k:"<",l:"小于"},
        {k:"<=",l:"小于等于"},
        {k:">",l:"大于"},
        {k:">=",l:"大于等于"},
        {k:"!=",l:"不等于"},
        {k:"like",l:"包含like"},
        {k:"not like",l:"不包含"},
        {k:"in",l:"IN"},
        {k:"not in",l:"NOT IN"},
        {k:">>",l:"右移"},
        {k:"<<",l:"左移"},
      ],
    }
  },
  props:{
    'data':{type:Object},
    'showSaveBtn':{type:Boolean,default:false},
    'showFields':{type:Boolean,default:false},
    'fields':{type:Array,default:[]},
    'showLimit':{type:Boolean,default:false}
  },
  watch:{

  },
  mounted () {
    if(!this.form.params){
      this.form.params = [];
    }
  },
  methods:{
    buildOneParam:function(){
      return {name:"",compare:"=",value:""}
    },
    addParam:function(idx){
      this.form.params.splice(idx+1,0,this.buildOneParam())
    },
    deleteParam:function(idx){
      this.form.params.splice(idx,1)
    },
    chooseName:function(command,item){
      item.name=command
    },
    confirm:function(){
      //检查配置是否正确
      if(!this.form.url){
        this.$message({type:"error",message:"请配置请求地址"});
        return;
      }
      if(this.form.params && this.form.params.length>0){
        for(var i=0;i<this.form.params.length;i++){
          var item = this.form.params[i];
          if(!item.name){
            this.$message({type:"error",message:"请配置参数名"});
            return;
          }
        }
      }
      this.$emit("save-data",this.form)
    }
  }
}
</script>

<style lang="scss">
.mc-api-param {
  .el-form-item{
    margin-top:10px;
  }
  .el-select{
    width:99%;
  }
}

</style>
